$(function () {
    // 查询的参数对象
    var query = {
        pagenum: 1, //第几页
        pagesize: 2, //每一页显示多少条
        cate_id: '', //分类ID
        state: '' //文章发布状态
    }
    // 导入layui相关
    const form = layui.form
    const layer = layui.layer
    var laypage = layui.laypage //分页

    // 发起请求，获取数据
    getArtList()
    // 获取数据
    function getArtList () {
        $.ajax({
            method: 'get',
            url: '/my/article/list',
            data: query,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取文章列表失败！')
                }
                console.log(res);
                // 使用模板引擎渲染数据
                let htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
                // 渲染分页 
                renderPage(res.total)
            }
        })
    }

    // 定义 美化时间格式的过滤器
    // 将其导出到模板中，这样就可以在html文件的模板中拿到
    template.defaults.imports.dateFormat = function (date) {
        const dt = new Date(date)
        // 年月日
        const y = dt.getFullYear()
        const m = padZero(dt.getMonth() + 1)
        const d = padZero(dt.getDate())

        // 时分秒
        const hh = padZero(dt.getHours())
        const mm = padZero(dt.getMinutes())
        const ss = padZero(dt.getSeconds())

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
    // 补0的函数
    function padZero (n) {
        if (n <= 9 && n >= 0) {
            return '0' + n
        }
        return n
    }

    // 调用函数获取分类数据
    getCate()
    // 获取分类数据
    function getCate () {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取分类失败！')
                }
                // 渲染模板
                const htmlStr = template('tpl-cate', res)
                $('[name=cate_id').html(htmlStr)
                // 使用layui的form.render(type, filter);方法
                // 让layui重新渲染页面数据,参考官方文档
                form.render('select');
            }
        })
    }

    // 点击筛选按钮之后，发送请求,为表单绑定提交事件
    $('#form-search').on('submit', function (e) {
        //阻止默认事件
        e.preventDefault()
        // 拿到表单的数据值
        const cate_id = $('[name=cate_id').val()
        const state = $('[name=state').val()
        // 赋值
        query.cate_id = cate_id
        query.state = state
        // 发送请求
        getArtList()
    })

    // 定义渲染分页的方法
    function renderPage (total) {
        // total 总数 
        //执行一个laypage实例，渲染分页结构
        console.log(total);
        laypage.render({
            elem: 'pageBox' //注意，这里的 pageBox 是 ID，不用加 # 号
            , count: total //数据总数，从服务端得到
            , limit: query.pagesize //每一页显示多少条数据
            , curr: query.pagenum //显示第几页
            // 数组内的顺序会绝对在页面中的显示顺序
            , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip']
            , limits: [2, 4, 6, 10]
            , jump: function (obj, first) {
                // 触发jump回调的方式： 
                // 1 点击页码会触发
                // 2 只要调用了laypage.render方法就会触发
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                query.pagenum = obj.curr
                query.pagesize = obj.limit
                // 第1种方式触发first值为false 
                // 第2种方式触发first值为true
                // console.log(first);
                if (!first) {
                    // 只有第1中
                    getArtList()
                }
            }
        });
    }

    // 代理的方式，删除按钮绑定点击事件
    $('.layui-table').on('click', '.btn-delete', function (e) {
        // 要删除的文章的id
        const id = $(this).attr('data-id')
        // 删除按钮的个数
        const btnNum = $('.btn-delete').length
        layer.confirm('确定要删除吗?', function (index) {
            //do something
            $.ajax({
                method: 'get',
                url: '/my/article/delete/' + id,
                success: function (res) {
                    console.log(id);
                    if (res.status !== 0) {
                        return layer.msg('删除文章失败！')
                    }
                    layer.msg('删除文章成功！')
                    // 判断这一页还有没有数据，没有数据的话就页码-1
                    // 判断当前页面上 删除按钮 的个数
                    if (btnNum === 1) {
                        if (query.pagenum > 1) {
                            query.pagenum--
                        }
                    }
                    // console.log(query);
                    // 重新渲染
                    getArtList()
                }
            })

            layer.close(index);
        });
    })

    // 代理，编辑按钮的点击事件
    $('body').on('click', '.btn-edit', function (e) {
        // 先获取文章的id
        const artId = $(this).attr('data-id')
        // console.log('---' + artId);
        // 跳转到编辑页面，同时是传递文章id
        location.href = '/article/art_edit.html?id=' + artId
    })


})